<template>
	<div class="paySuccess" v-if="Object.keys(orderInfo).length>0">
		<!-- 头部 -->
		<div class="nav_top d-flex jc-between ai-center">
			<div> 
				
			</div>
			<div class="fs-xxl pr-3 py-3 text-white">
				支付成功
			</div>
			<div>
			</div>
		</div>
		<div class="pb-3">  
			<div class="text-c text-white d-flex jc-around pt-3 mt-3">
				<div class="d-flex ai-center">
					<div class="iconfont icon-chenggong"></div>
					<div class="fs-xxl py-3 pl-2">您的订单已支付成功</div>
				</div>
				
			</div>
			
			<div class="text-c text-white">
				订单款项由天院快药代收并进行商品配送
			</div>
		</div>
		<div class="alert bg-white mx-2 py-3 mt-3 my-3">
			
			<div class="d-flex jc-between ai-center text-grey px-3 py-2">
				<div>订单编号</div>
				<div class="text-dark">{{orderInfo.id}}</div>
			</div>
			<div class="d-flex jc-between ai-center text-grey px-3 py-2">
				<div>收货人</div>
				<div class="text-dark">{{orderInfo.consignee}}</div>
			</div>
			<div class="d-flex jc-between ai-center text-grey px-3 py-2">
				<div>联系电话</div>
				<div class="text-dark">{{orderInfo.consigneePhone}}</div>
			</div>
			<div class="d-flex jc-between ai-center text-grey px-3 py-2">
				<div>收货地址</div>
				<div class="text-dark">{{orderInfo.consigneeAddress}}</div>
			</div>
			<div class="d-flex jc-between ai-center text-grey px-3 py-2">
				<div>应付金额</div>
				<div class="text-pink">￥{{orderInfo.payMoney/100}}</div>
			</div>
			
		</div>

		<router-link tag="div" :to="'/order/orderInfo/'+id" class="alert d-flex jc-between bg-white mx-2 py-3 mt-3 my-3 px-2">
			<div class="d-flex">
				<div class="iconfont icon-dingdan text-pink pr-2"></div>
				<div>订单详情</div>
			</div>
			<div class="d-flex">
				<div class="pr-2 text-grey">查看</div>
				<div class="iconfont icon-right"></div>
			</div>
		</router-link>

		<!-- 支付跳转按钮 -->
		<div class="alert mx-2 py-3 mt-2 text-c" style="height: 300px;">
			<el-button type="danger" @click="goHome">返回首页
			</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['id'],
		data(){
			return {
				orderInfo: {},

			}
		},
		methods: {
          goHome(){
          	this.$router.push('/');
          },
          async getOrderInfo(){
             const res = await this.$http.get(`order/findOrderById.do?id=${this.id}`)
              if (res.data.code != 0) {
              	this.orderInfo = res.data.order;
              }else {
              	Toast('订单不存在！')
              }
          }
		},
		created(){
            this.getOrderInfo();
		},
		mounted() {   //在页面创建之前设置body的背景色
			document.querySelector('body').setAttribute('style', 'background: linear-gradient(to bottom,rgba(227, 38, 57,1),rgba(250,250,250,1));height: 58rem;')
		}, 
        beforeDestroy() {   //在页面销毁之前移除body的属性，目的是设置的颜色只对当前页面有效
        	document.querySelector('body').removeAttribute('style')
        },
	}
</script>

<style lang="scss" scoped>
	.alert {
		border-radius: 1%;
	}
	.el-button {
		width: 98%;
	}
</style>